<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"
          integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">

    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"
            integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp"
            crossorigin="anonymous"></script>

    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js"
            integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
            onload="renderMathInElement(document.body);"></script>
</head>


<body>

<div id="id1"></div>
<div id="id2">"c = \\pm\\sqrt{a^2 + b^2}"</div>

<script>
    function myfun1() {
        var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
            throwOnError: false
        });
        console.log(html)
        document.getElementById('id1').innerHTML = html;

    }

</script>

<input type="button" value="b" onclick="myfun1()">
</body>
</html>